<template>
    <div id="login-tab-container">
        <router-link to="/login/entry">
            <div class="login-tab-but" :style="getStyle('/login/entry')">登录</div>
        </router-link>
        <router-link to="/login/registry">
            <div class="login-tab-but" :style="getStyle('/login/registry')">注册</div>
        </router-link>
    </div>
</template>

<script>

export default {
    data() {
        return {
            // 当前活动区域样式，颜色和下边框
            lbtbColor: {
                color: "rgb(255, 255, 255)",
                borderBottom: "3px solid rgba(109,142,255, 0.6)"
            }
        }
    },
    methods: {
        getStyle(path) {
            // 如果当前路由与元素提供的元素相同，则返回活动样式
            if (path === this.$route.path) {
                return this.lbtbColor
            }
        }
    }
}
</script>

<style lang="scss">
@import "@login/scss/title.scss";
</style>